<template>
<div class="container">
  <div class="header">
    <van-icon name="arrow-left" tag="a" href="/home" />
    <span>健身七分吃</span>
  </div>
  <div class="content">
    <div class="nav">
      <b>减脂</b>
      <b>减肥</b>
      <b>瘦身</b>
      <b>做梦</b>
      <b>增肌</b>
    </div>

    <div class="top">
      <h5>
        <a>运动方式</a>
        <a>更多</a>
      </h5>
      <ul>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
        </li>
      </ul>
    </div>  

    <div class="bottom">
      <h5>
        <a>菜谱</a>
        <a>更多</a>
      </h5>
      <ul>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
      </ul>
    </div>  
  </div>
</div>  
</template>

<style lang="scss" scoped>
  @import "@/lib/reset";
  .container {
    .header {
      @include flexbox();
	    @include justify-content();
	    @include align-items();
      line-height:.42rem;
      a {
        position: absolute;
        left:0;
      }
    }
    .content {
      @include overflow(auto);
      .nav {
        margin-left: .1rem;
        margin-right: .1rem;
        @include flexbox();
        @include flex-direction();
        @include justify-content(space-between);
      }
      h5 {
        @include flexbox();
        @include justify-content(space-between);
        margin: .1rem;
      }
      .top {
        ul {
          @include flexbox();
          @include justify-content(space-between);
          @include flex-wrap(wrap);
          margin-left: .1rem;
          margin-right: .1rem;
          li {
            width:1.6rem;
            img {
              @include rect(1.6rem,1.6rem);
              margin-bottom: .1rem;
            }
            p {
              width:100%;
              margin-bottom: .15rem;
            }
          }
        }
      }
      .bottom {
        ul {
          li {
            @include flexbox();
            img {
              @include rect(1.6rem,1.6rem);
              margin-bottom: .1rem;
            }
            .right {
              margin-left:.2rem;
              margin-right:.2rem;
              p {
                line-height: .3rem;
                font-weight: 800;
                margin-bottom: .1rem
              }
              a {
                margin-right:.1rem;
              }
            }
          }
        }
      }
    }
  }  
</style>

<script>
import Vue from 'vue';
import { Icon } from "Vant";
Vue.use(Icon)

export default {
  
}
</script>
